<template>
	<div>
		<div class="box">
			<div class="loginbox">
				<h2>speedy管理系统</h2>
				<hr />
				<ul>
					<li>
						<div class="input-group">
							<span class="input-group-addon">账号</span>
							<input type="text" class="form-control" v-model="account" />
						</div>
					</li>
					<li>
						<div class="input-group">
							<span class="input-group-addon">密码</span>
							<input type="text" class="form-control" v-model="password" />
						</div>
					</li>
				</ul>
				<hr>
				<div style="wdth:100%;text-align: center;">
					<p>桌面版 <input type="checkbox" v-model="isdesktop" /> </p>
				</div>
				<div class="btns">
					<button class="btn btn-info" @click="logins()">登录</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "app",
		data() {
			return {
				account: "1",
				password: "1",
				isdesktop: false

			}
		},
		methods: {
			logins(path) {
				var account = this.account;
				var password = this.password;
				let checkedFlag = this.isdesktop;
				if (account == "") {
					this.Alert.hint("账号不能为空");
					return;
				} else if (password == "") {
					this.Alert.hint("密码不能为空");
					return;
				} else {
					if(account=="1"&&password==1){
						this.$router.push({
							"path": "/index"
						})
						return;
					}
					this.http.post("/common/login/login", {
						"account": account,
						"password": password
					}, success => {
						if (success.state == 1) {
							this.Alert.hint("登录成功，即将跳转");
							setTimeout(function() {
								if (checkedFlag) {
									this.$router.push({
										"path": "/desktop/index"
									})
								} else {
									this.$router.push({
										"path": "/main"
									})
								}
							}, 2000)
						} else {
							this.Alert.hint(res.message);
						}
					}, error => {
						this.$router.push({
							"path": "/desktopMain"
						})
						this.Alert.hint(error.message)
					})
				}
			}
		}
	}
</script>
<style scoped>
	.box {
		position: fixed;
		background-image: url(../static/images/loginBgk.png);
		background-repeat: no-repeat;
		background-color: #cce5ef;
		background-position: 20% center;
		height: 100%;
		width: 100%;
		z-index: -1;
	}

	.loginbox {
		position: fixed;
		min-width: 370px;
		width: 30%;
		height: 340px;
		background: #fff;
		right: 100px;
		top: 25%;
		border-radius: 5px;
		box-shadow: 5px 5px 5px #999;
	}

	.loginbox h2 {
		margin: 20px;
		color: #2f3f51;
		text-align: center
	}

	.loginbox ul {
		list-style: none;
		width: 80%;
		padding: 0;
		margin: 0;
		margin: 0 auto;
	}

	.loginbox ul li {
		height: 20%;
		font-size: 16px;
		margin-top: 20px;
	}

	.loginbox ul li span {
		margin-right: 10px;
	}

	.loginbox ul li input {
		width: 80%;
		background: #fff;
		outline: none
	}

	.loginbox .btns {
		width: 80%;
		margin: 0px auto;
	}

	.loginbox .btns .btn {
		width: 100%;
		color: #fff;
		font-weight: bold;
		text-shadow: 1px 1px 1px #2f3f51;
		letter-spacing: 1em;
	}
</style>
